<template>
  <div v-loading="loading" element-loading-text="正在获取数据" style="width: 40%;margin: auto;min-width: 600px;">
    <br>
    <el-row v-if="config.setup" :key="'config_setup' + componentKey[0]">
      <el-col :span="4"><b style="margin-bottom: 20px;">开机启动</b></el-col>
      <el-col :span="20">
        <el-row>
          <el-checkbox v-for="(v, key) in config.setup" :key="key" v-model="config.setup[key]" @change="setup_change"
            :label="key.toUpperCase()" size="large" border />
        </el-row>
      </el-col>
    </el-row>
    <br>
    <el-collapse v-if="!loading" v-model="activeName" accordion>
      <io_config v-if="config.io_config" :io_config="config.io_config" v-model:wakeup_config="config.wakeup"
        :io_max="store.chip.io" :key="'config_io_waekup' + componentKey[1]" />
      <FunctionConfig v-if="config.function" :function_config="config.function"
        :key="'config_io_waekup' + componentKey[2]" />
      <WifiConfig v-if="config.wifi" :sta_config="config.wifi.sta" :ap_config="config.wifi.ap"
        :wifi_mode="config.wifi.mode" :key="'config_wifi' + componentKey[3]" />
    </el-collapse>
    <br>
  </div>
</template>

<script setup lang="ts">
import io_config from './io_config.vue';
import FunctionConfig from './FunctionConfig.vue';
import WifiConfig from './WifiConfig.vue';
import Bus from "~/utils/bus";
import store from "~/utils/store";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"
const componentKey = ref([0, 0, 0, 0])
const activeName = ref('1')
const config = toRef(store)
const loading = computed(() => {
  // return !(config.value && 'chip' in config.value && 'io_config' in config.value && 'setup' in config.value && 'wifi' in config.value)
  return !(config.value && 'chip' in config.value && 'io_config' in config.value && 'setup' in config.value)
  // return !(config.value && ('chip' in config.value || 'io_config' in config.value || 'setup' in config.value || 'wifi' in config.value))
  // return false
})

const get_config_msg = (result) => {
  if (result.api == 'get_config_setup') {
    config.value.setup = toRef(result.data);
    componentKey.value[0]++;
  } else if (result.api == 'get_config_io') {
    config.value.io_config = toRef(result.data);
    componentKey.value[1]++;
  } else if (result.api == 'get_config_function') {
    config.value.function = toRef(result.data);
    componentKey.value[2]++;
  } else if (result.api == 'get_config_wifi') {
    config.value.wifi = toRef(result.data);
    componentKey.value[3]++;
  }
}

const get_result_msg = (result) => {
  const api_action = {
    set_config_setup: {
      label: '启动设置保存',
      error: { api: "get_config_setup" }
    },
    set_config_io: {
      label: 'IO配置保存',
      error: { api: "get_config_io" }
    },
    set_config_function: {
      label: '功能配置保存',
      error: { api: "get_config_function" }
    },
    wifi_connect: {
      label: 'WiFi 连接',
      success: { api: "get_config_wifi" }
    },
    wifi_mode: {
      label: 'WiFi 模式修改',
      always: { api: "get_config_wifi" },
    },
    wifi_config_sta: {
      label: 'WiFi STA 配置修改',
      always: { api: "get_config_wifi" },
    },
    wifi_config_ap: {
      label: 'WiFi AP 配置修改',
      always: { api: "get_config_wifi" },
    },
  }
  const obj = api_action[result.api]
  if (!obj)
    return;
  if (result.data == -1) {
    ElMessage.error(obj.label + '失败')
    if (obj.error)
      Bus.emit('push.msg', obj.error)
  }
  else {
    ElMessage.success(obj.label + '成功' + (result.data != 0 ? ":" + result.data : ''))
    if (obj.success)
      Bus.emit('push.msg', obj.success)
  }
  if (obj.always)
    Bus.emit('push.msg', obj.always)
}

onBeforeUnmount(() => {
  Bus.off("update:msg", get_config_msg)
  Bus.off("update:msg", get_result_msg)
});

onBeforeMount(() => {
  Bus.on("update:msg", get_config_msg);
  Bus.on('update:msg', get_result_msg);
  Bus.emit('push.msg', { api: "get_chip_info" })
  Bus.emit('push.msg', { api: "get_config_setup" })
  Bus.emit('push.msg', { api: "get_config_io" })
  Bus.emit('push.msg', { api: "get_config_function" })
  Bus.emit('push.msg', { api: "get_config_wifi" })
});

let handle: number = -1;
const setup_change = () => {
  if (handle != -1) {
    clearTimeout(handle)
    handle = -1
  }
  handle = setTimeout(() => {
    Bus.emit('push.msg', { api: "set_config_setup", data: config.value.setup })
  }, 3000)
}

</script>

<style scoped>
:deep(.el-descriptions__content) {
  font-size: 1.5em !important;
}

:deep(.el-col) {
  margin-bottom: 10px;
}

:deep(.el-checkbox) {
  margin-bottom: 10px;
}
</style>